<template>
	<view class="music-container">
    <view class="music-cover">
      <image class="music-bg" :src="img"></image>
      <image class="music-menu" :src="isPlay?pauseMenu:playMenu"></image>
    </view>
    <image class="music-tag" src="../../static/images/music_tag.png"></image>
    <text class="music-content">{{content}}</text>
	</view>
</template>

<script>
	export default {
    props:{
      img: String,
      content: String
    },
		data() {
			return {
				playMenu: require('../../static/images/player_play.png'),
        pauseMenu: require('../../static/images/player_pause.png'),
        isPlay: false
			};
		}
	}
</script>

<style>
.music-container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.music-cover{
  width: 750rpx;
  height: 500rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.music-bg{
  width: 450rpx;
  height: 450rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.music-menu{
  width: 80rpx;
  height: 80rpx;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  align-self: center;
}
.music-tag{
  width: 46rpx;
  height: 142rpx;
  position: relative;
  bottom: 58rpx;
  right: 310rpx;
}
.music-content{
  font-size: 36rpx;
  max-width: 550rpx;
}
</style>
